import DmnModeler from 'dmn-js/lib/Modeler'
import propertiesPanelModule from 'dmn-js-properties-panel'
import drdAdapterModule from 'dmn-js-properties-panel/lib/adapter/drd'
import propertiesProviderModule from 'dmn-js-properties-panel/lib/provider/dmn'
import camundaModdleDescriptor from 'camunda-dmn-moddle/resources/camunda'
import { getProgressModel, updateProgressModel } from '@/api/model'

export default {
  data () {
    return {
      xmlData: '',
      progressModel: null,
      dmnModeler: null,
      container: null,
      canvas: null
    }
  },
  created () {
    this.setInitData()
  },
  methods: {
    setInitData () {
      // 现获取模型数据，再打开模拟器
      const thisModelId = this.$route.query.modelId
      getProgressModel({
        modelId: thisModelId
      }).then(response => {
        // 获取到模型，允许修改
        if (response.code == 20000) {
          this.progressModel = response.data
	    			this.xmlData = this.progressModel.xmlData
        }
        this.setModeler()
	        }).catch(error => {
	        	// 未获取到模型，允许导出
	        	this.setModeler()
	        })
    },
    setModeler () {
      // 获取到属性ref为“content”的dom节点
      this.container = this.$refs.content
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 建模，官方文档这里讲的很详细
      this.dmnModeler = new DmnModeler({
        container: canvas,
        drd: {
          // 添加控制板
          propertiesPanel: {
            parent: '#js-properties-panel'
          },
          additionalModules: [
            // 左边工具栏以及节点
            propertiesProviderModule,
            // 右边的工具栏
            propertiesPanelModule,
            drdAdapterModule
          ]
        },
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })
      this.openDiagram(this.dmnModeler)
    },
    saveDiagram () {
      const _this = this
      this.dmnModeler.saveXML({
        format: true
      }, function (err, xml) {
        if (err && xml != null && xml != '') {
          return console.error('无法保存DMN 2.0流程图', err)
        }
        updateProgressModel({
          modelId: _this.progressModel.modelId,
          xmlData: xml
        }).then(() => {
		            // 刷新模型列表数据
		            _this.$notify({
		              title: '成功',
		              message: '保存成功',
		              type: 'success',
		              duration: 2000
		            })
		        })
      })
    },
    exportDiagram () {
      console.log('点击保存DMN流程图')
      this.dmnModeler.saveXML({
        format: true
      }, function (err, xml) {
        if (err) {
          return console.error('无法保存DMN 2.0流程图', err)
        }
        var a = document.createElement('a')
        a.setAttribute('href',
          'data:application/dmn11-xml;charset=UTF-8,' + xml)
        a.setAttribute('download', 'my_dmn.dmn')
        a.click()
      })
    },
    openDiagram (dmnModeler) {
      let dmnXmlStr = ''
      if (this.xmlData == null || this.xmlData == '') {
        dmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
				'<definitions xmlns="http://www.omg.org/spec/DMN/20151101/dmn.xsd" xmlns:biodi="http://bpmn.io/schema/dmn/biodi/1.0" id="init_dmn_id" name="init_dmn_name" namespace="http://camunda.org/schema/1.0/dmn" exporter="Camunda Modeler" exporterVersion="3.4.1">\n' +
				'<decision id="Decision_0bs49yl" name="init">\n' +
				'<extensionElements>\n' +
				'<biodi:bounds x="200" y="150" width="180" height="80" />\n' +
				'</extensionElements>\n' +
				'</decision>\n' +
				'</definitions>\n'
      } else {
        dmnXmlStr = this.xmlData
      }
      dmnModeler.importXML(dmnXmlStr, function (err) {
        if (err) {
          return console.error('无法导入DMN 2.0流程图', err)
        }
        const activeView = dmnModeler.getActiveView()
        if (activeView.type === 'drd') {
          var activeEditor = dmnModeler.getActiveViewer()
          var canvas = activeEditor.get('canvas')
          canvas.zoom('fit-viewport')
        }
      })
    }
  },
  mounted () {

  }
}
